// 通过回调函数来返回最终的值,使用文本框来做下拉框
function addInputSelectBox(callBackFun, lableName, selectData = [{ 'key(键)': 'value(值)' }], required = false) {
    //创建
    return createInputSelectBox(callBackFun, lableName, selectData, required);
}

//当最后获取值的时候，直接点提交，需要检查，必填的需要进行提示
function checkInputSelectBox(inputSelectBoxEl) {
    // 因为可能会有多个inputSelectBox，所以要单独处理
    if (inputSelectBoxEl.firstElementChild.classList.contains('required-flag') && chkObjNull(inputSelectBoxEl.lastElementChild.firstElementChild.firstElementChild.value)) {
        inputSelectBoxEl.lastElementChild.lastElementChild.style.visibility = 'visible';
        if (!inputSelectBoxEl.lastElementChild.firstElementChild.classList.contains('prompt')) {
            inputSelectBoxEl.lastElementChild.firstElementChild.classList.add('prompt');
        }
        if (!inputSelectBoxEl.lastElementChild.firstElementChild.classList.contains('luminescence')) {
            inputSelectBoxEl.lastElementChild.firstElementChild.classList.add('luminescence');
        }
        // 还是不要获取焦点了
        // inputSelectBoxEl.lastElementChild.firstElementChild.firstElementChild.focus();

        // 检验不通过
        return false;
    }
    // 检验通过
    return true;
}

function createInputSelectBox(callBackFun, lableName, selectData, required) {
    const inputSelectBoxEl = document.createElement('div');
    inputSelectBoxEl.className = 'input-select-box';
    const lableEl = document.createElement('div');
    lableEl.className = 'label-style';
    lableEl.innerText = lableName;
    if (required) {
        lableEl.classList.add('required-flag');
    }
    const contentEl = document.createElement('div');
    contentEl.className = 'content-style';
    const mianBoxEl = document.createElement('div');
    mianBoxEl.className = 'input-select-main-box';
    const inputEl = document.createElement('input');
    inputEl.type = 'text';
    inputEl.placeholder = '请选择';
    inputEl.readOnly = true;
    const arrowEl = document.createElement('div');
    arrowEl.className = 'input-select-main-arrow-box';
    const imgEl = document.createElement('img');
    imgEl.src = 'https://xiaomaomi-xj.gitee.io/specific-features/public/img/arrow.png';
    imgEl.alt = '下拉框图标';
    const dropBoxEl = document.createElement('div');
    dropBoxEl.className = 'input-select-main-drop-box';
    const footerEl = document.createElement('div');
    footerEl.className = 'input-select-footer-box';
    footerEl.innerText = '请选择内容！';
    arrowEl.appendChild(imgEl);
    selectData.forEach(v => {
        let key = Object.keys(v)[0];
        let value = Object.values(v)[0];
        const dropValueEL = document.createElement('div');
        dropValueEL.className = 'input-select-main-drop-value';
        dropValueEL.innerText = value;
        dropValueEL.addEventListener('click', () => {
            //设置文本框的value
            inputEl.value = value;
            if(mianBoxEl.classList.contains('prompt') && footerEl.style.visibility == 'visible'){
                mianBoxEl.classList.remove('prompt');
                footerEl.style.visibility = 'hidden';
            }
            // 传回去key
            callBackFun(key);
        });
        dropBoxEl.appendChild(dropValueEL);
    });
    mianBoxEl.appendChild(inputEl);
    mianBoxEl.appendChild(arrowEl);
    mianBoxEl.appendChild(dropBoxEl);
    contentEl.appendChild(mianBoxEl);
    contentEl.appendChild(footerEl);
    inputSelectBoxEl.appendChild(lableEl);
    inputSelectBoxEl.appendChild(contentEl);
    //获得焦点事件
    inputEl.addEventListener('focus', () => {
        mianBoxEl.classList.add('luminescence');
        mianBoxEl.classList.add('prompt');
        //获取焦点打开
        openDropBox();
    });
    //失去焦点
    inputEl.addEventListener('blur', e => {
        mianBoxEl.classList.remove('prompt');
        mianBoxEl.classList.remove('luminescence');
        //失去焦点关闭
        closeDropBox();
        //如果是必填的，检查有没有值     
        if (required) {
            if (chkObjNull(inputEl.value)) {
                // 还要显示边框颜色
                mianBoxEl.classList.add('prompt');
                footerEl.style.visibility = 'visible';
            } else {
                //有内容去掉
                mianBoxEl.classList.remove('prompt');
                footerEl.style.visibility = 'hidden';
            }
        }
    });

    //打开下拉内容
    function openDropBox() {
        imgEl.classList.add('rotate');
        dropBoxEl.style.display = 'block';
        setTimeout(() => {
            dropBoxEl.style.transform = 'scaleY(1)';
            dropBoxEl.style.opacity = '1';
        });
    }

    //关闭下拉内容
    function closeDropBox() {
        imgEl.classList.remove('rotate');
        dropBoxEl.style.transform = 'scaleY(.8)';
        dropBoxEl.style.opacity = '0';
        setTimeout(() => {
            dropBoxEl.style.display = 'none';
        }, 300);
    }
    return inputSelectBoxEl;
}